Getting Started With React | React Core Concepts | Props & Component.

If you have some basic knowledge in HTML/CSS and Most importantly JavaScript, You Can start React JS right away… The you only have to able to differenciate betweeen what is react ang what is javascript.

  1. Installation process…

you must have node and npm installed on you machine, I’m not going much details on that but you can find much more good articles on that..

Open you terminal and write

npx create-react-app my-first-app

it will take while but after intallation you’ll see tow further command just follw them

cd my-first-app

npm start

Yeah you’ve successfully done Installing your first react app…

2. Folder Structure…

Index.html- Here you’ll change the title name to My First App..

You’ll see a src folder, in that folder there is a app.js file (This where you’ll do the main stuff)

Note that: [<div id= “root”></div>]-This thing written in index.js file. All you write in App.js goes to that index.html file through that Id.

3. What is JSX? What Actual power it contains?
Its a JavaScript function with super powers,

here’s how its look like

import React from ‘react’;

const App = () => {

return (

<div>

//Here you write your code

</div>

);

};

export default App;

in the div section you're able to write html, CSS and JavaScript…

4. What is component Or how to identify component?

there are several ways to identify a component,
Firstly, similar in look and different in data. It means you see some similar cards or something which look similar but the data is different. That a component.

Secondly, Sometimes Components are declared to contain some other components as well.

Thirdly, The Hero Section is also considered as a component.

Each of them are sperate stateless functions mentioned above. But you can organize them a folder.

5. Create a Component

lets create a Person Componet..

import React from ‘react’;

const Person = () => { // Its good practice to create component with capital letter.

let borderRed = { //This is a object but it will work like css

border: ‘2px solid red”,

margin: 10px

}

return (

<div style={{border: ‘2px solid yellow’, margin: ‘10px’}}> //inline css

<h1 style={borderRed}> Name: Nayeem<h1> // I just called it from above

</div>

);

};

export default App;

6. Send data in person component through props.

goto your App.js file

import the Person component

in the return section write

  • <Person name = Nayeem job=Engineer></Person> //these attributes are will get access in person component through props.

goto person component

  • const Person = (props) => { //By writing props you’ll get access of those attributes

return (

<div style={borderRed}>

<h1 > {props.name}<h1> // you’ll see output Nayeem in here

</div>

);

};

7. Pass a whole object in props.

You can simply pass a whole object in the component through props and get access by their index number.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store