Best React JS Project for Beginners: Get Code

Hey, are you a beginner? Looking for React JS Project for Beginners? Then you are at the right place.

React is a very famous language for making the front-end design. Facebook has introduced this language. Today with the help of React, we are going to learn how to make a basic react js project using Arrays, Arrays map, and fat Arrow function, which are very commonly used in reacting programming language.

We assume that you know how to open your project editor, and you know how to start in NPM. If you wish to tell me how we can install the react editor and react NPM, comment below to make another article that will help you install and use the NPM to react.

First React Project
React code

Download React for free: https://react-cn.github.io/react/downloads.html

How to Create Beginner React JS Project for?

Today we are going to create react js project for beginners who have started learning to react programming. You can see the image below and have an idea of how to make this react beginners project.

In visual code, when we start writing the react JS program, we can see a few of the files already available on the left of the screen; the files are index.js App.js, and index.CSS were already made before we started the react JS program in visual code.

In every project, we do need to add a few extra files. Now the files we are going to add will be shown in the SRC section. The most important thing you need to take care of before adding any file is the name of the file should always have the first letter capital and the extension you need to help the react understand that the file belongs to this project .jsx for react.

The code needs to be added to the index.js

The Code of index.js File

import ReactDOM from ‘react-dom’;

import Card from ‘./Card’;

import ‘./index.css’;

import Sdata from ‘./Sdata’;

ReactDOM.render(

  <>

    <h1 className=’heading_style’>List of shows</h1>

    {

      Sdata.map

        (

        (val) =>

          {

            return(

              <Card 

                image={val.image}

                title={val.title} 

                cardtiti={val.cardtiti} 

                link={val.link}

              />

            );

          }

        )

    }

  </>,

  document.getElementById(‘root’)

);

The Code of index.css File

@import url(“https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,700&display=swap”);

@import url(“https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap”);

*{

  box-sizing: border-box;

  padding: 0;

  margin: 0;

  background-color: #d2dbdd;

}

.heading_style{

  padding: 30px 0;

  text-align: center;

  font-family: ‘Raleway’, sans-serif;

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 12px;

  font-weight: 500;

  color: #868686;

  font-size: 1.5rem;

  margin-bottom: 30px;

  background-color: #ffffff

  ;

}

.cards{

  width: 100%;

  height: auto;

}

.card{

  margin: 6%;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);

  background-color: #ffffff;

  width: 21.25%;

  border-radius: 12px;

  box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);

  float: left;

}

.card:hover{

  box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);

  transform: scale(1.05,1.05);

}

.card_img{

  width: 100%;

  height: 235px;

  border-radius: 10px;

}

.card_info{

  background-color: #ffffff;

  border-bottom-left-radius: 12px;

  border-bottom-right-radius: 12px;

  padding: 16px 24px 24px 24px;

  background-color: #ffffff;

}

.card_catager{

  font-family: ‘Raleway’, sans-serif;

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 2px;

  font-weight: 500;

  color: #868686;

  background-color: #ffffff;

}

.card_title{

  margin-top: 5px;

  margin-bottom: 10px;

  font-family: ‘Raleway’, sans-serif;

  background-color: #ffffff;

  text-transform: capitalize;

}

button{

  padding: 5px 8px;

  font-family: ‘Raleway’, sans-serif;

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 2px;

  font-weight: 500;

  color: #868686;

  background-color: #ffffff;

  outline: none;

  border: 1px solid black;

  cursor: pointer;

}

@media(max-width: 768px){

  .card{

    float: none;

    margin: 5%;

    width: 90%;

  }

}

The Code of Sdata.css File

const Sdata= [

    { 

    image:”https://picsum.photos/200/300″,

     title:”NAME OF THE PLATFORM” ,

     cardtiti:”SUBTITLE”,

     link:”http://infoatone.com/” 

    },

    {

   image:”https://picsum.photos/id/237/200/300″,

   title:”NAME OF THE PLATFORM” ,

   cardtiti:”SUBTITLE”,

   link:”http://infoatone.com/” 

    },

  {

  image:”https://picsum.photos/seed/picsum/200/300″,

  title:”NAME OF THE PLATFORM”, 

  cardtiti:”SUBTITLE”,

  link:”http://infoatone.com/” 

  },

  { 

    image:”https://picsum.photos/200/300″,

     title:”NAME OF THE PLATFORM” ,

     cardtiti:”SUBTITLE”,

     link:”http://infoatone.com/” 

    },

    {

   image:”https://picsum.photos/id/237/200/300″,

   title:”NAME OF THE PLATFORM” ,

   cardtiti:”SUBTITLE”,

   link:”http://infoatone.com/” 

    },

  {

  image:”https://picsum.photos/seed/picsum/200/300″,

  title:”NAME OF THE PLATFORM”, 

  cardtiti:”SUBTITLE”,

  link:”http://infoatone.com/” 

  }

]

export default Sdata;

The Code of Card.css File

import React from ‘react’;

function Card(props)

{

  console.log(props);

return(

  <>

  <div className=”cards”>

    <div className=”card”>

      <img 

        src={props.image}

        alt=”mipic”

        className=”card_img”

      />

      <div className=”card_info”>

        <span className=”card_catager”>{props.title}</span>

        <h3 className=”card_title”>{props.cardtiti}</h3>

        <a href={props.link} target=”_blank”>

          <button>Watch the show</button>

        </a>

      </div>

    </div>

  </div>

  </>

);

}

export default Card;

This is a way that will help you write React JS Project for Beginners code correctly for beginners. Now, if you have followed all the steps, you would not face any kind of difficulty, but in case if you are facing any kind of difficulties in the project, you can send us the screenshot and the message which is coming as the error. We will make sure that we will solve that problem as soon as possible and revert you.

This is one of the best programs for reacting beginners. If you wish to see some other kind of react programs or any other difficulties, you can comment, and we will make sure that we can help you as soon as possible. Info At One will try to come up with more react projects for beginners.

If you wish to get the code in person, you can always come, and we will share the source code with you at your personal email address. Click on Contact Us.

Leave a Reply

Your email address will not be published. Required fields are marked *