Goal : The Ultimate goal of this blog is about share what i learned or recalling from the concepts but not intention to copy their content to share, Just keeping for reference to myself.
In Last Month, I Just purchased courses JoyofReact to learn about react and how it works, Reason why i purchased this course is to develop my knowledge and of course for josh also because on his blog he explains everything curated of deep understanding of how its works and with interactive animation, Though i am not react developer, My teck stack is Angular,Laravel,Flutter, His teaching methodology made me to purchase this courses, Check out his work definitely you will learn something useful,JoshwComeau
On the Module 1 covered the basics and fundamenetals concepts, But here i listing out only few concepts, Which i needs to recall on very often and to keep short and crispy on this blog,
- Application Structure
- Understanding JSX
- Props
- Fragment
- Mapping Over Data
In order to start something, Must needs to understand how this frameworks and how its renders the code in the react, So here will see the application structure once after you created the project
- 1. index.js is the root of the application which runs initially when you start the project
- 2. App Which Stands for Application, Its an home base react component of the project, On this component where will managing the core layout things like Header , Footer
- 3. Module In the project using the ES module example of import , export
When learning about react, You must needs to understand the concepts of JSX and how its works, In order to develop the applications, Ok then what is JSX now, JSX stands for JavaScript XML In Short will be described as JSX and its allow to write HTML code in the react
- JSX is rule to write HTML code in react
- With help of JSX you can write HTML elements in the DOM
- It converts HTML Tags to react element
Example, In vscode you might be noticing about this type because if there is HTML element is wrong jsx will throws an error
Example Using JSX
1const result = <h1> Shall We Begin!! </h1>
2 const root = ReactDOM.createRoot(document.getElementById('root'));
3 root.render(result);
4 1. Passing data to Components, Interesting fact in the courses, In side by side you can brush up skills of javascript, Which it's called as the bonous chapter as Javascript Primer, If you aware about concepts of object destructuring assignment, Will be easy to understand how the props works in the react
1
2 // Normal Using Props
3 function Welcome(props){
4 return (
5 <h1>Hi {props.message}</h1>
6 );
7 }
8 // By Simplified
9 function Welcome({message}){
10 return (
11 <h1>Hi {message}</h1>
12 );
13 }
14 const root = ReactDOM.createRoot(document.getElementById('root'));
15 root.render(<Welcome message="Good Morning" />);
16 Props using by Default Values
1
2 // Normal Way
3 function PaymentSuccess({message}){
4 return (
5 <div> Payment {message || 'Failed'}</div>
6 );
7 }
8 // On Better Way
9 function PaymentSuccess({message = 'Failed'}){
10 return (
11 <div> Payment {message}</div>
12 );
13 }
14 Fragment is about adding list or multiple of elements in the react components
Example Syntax
1
2 function Exmaple {
3 return(
4 <>
5 <div className="card">
6 <h2>Shall We Begin</h2>
7 <p>Test Paragraph</p>
8 </div>
9 <>
10 )
11
12}Mapping data is one of my favourite part, The two types of mapping data which gonna see here
- Map
- Filter
Maps
So what is the map, As name itself you can understand, What does it really do, In the map method which is common methods which is used in react and it is an cleaner way of approach to transform the array of data
1const players = [
2 { id: 1001,name: "John",level:4},
3 { id: 1002,name: "Arya",level:2},
4 { id: 1003,name: "Suriya",level:5},
5 { id: 1004,name: "Rahul",level:1}
6 ];
7 const result = players.map(data => {
8 return data.name.toUpperCase();
9 })
10 console.log(result); // ['John', 'Arya', 'Suriya', 'Rahul']
11 Maps Example in React
1const studentInfo = [
2 {
3 id: 1,
4 name: "John",
5 department: "Computer Science",
6 },
7 {
8 id: 2,
9 name: "Arya",
10 department: "Maths",
11 },
12 {
13 id: 3,
14 name: "Suriya",
15 department: "Chemistry",
16 },
17
18 ];
19 function display(){
20 return (
21 <div>
22 {studentInfo.map((data) => (
23 <StudentInfo
24 name={data.name}
25 department={data.department}
26 />
27 ))}
28 </div>
29 );
30 }
31Filter Example
1const gamePlayers = [
2 { player: "Arya",name: "Godofwar", level: 12},
3 { player: "Suriya",name: "Horizon", level: 1},
4 { player: "Vincent",name: "Mario", level: 7},
5 { player: "Raju",name: "Godofwar", level: 2},
6 { player: "Ramesh",name: "Horizon", level: 4},
7 { player: "Tharun",name: "Mario", level: 7}
8 ];
9
10 const highLevelPlayer = gamePlayers.filter(data => {
11 return data.level > 4;
12 })
13
14 console.log(highLevelPlayer)
15 // Output
16 [
17 0 : { player: 'Arya', name: 'Godofwar', level: 12}
18 1 : { player: 'Vincent', name: 'Mario', level: 7}
19 2 : { player: 'Tharun', name: 'Mario', level: 7}
20 ]
21}