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.
- 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.
