Course Content
Run Your First Project
This course is designed to help you kickstart your journey in project management. Whether you're a beginner or looking to brush up on your skills, this course will provide you with the essential knowledge and tools needed to successfully manage your first project from start to finish. Join us in "Run Your First Project" and gain the confidence and skills to manage your next project with success!
0/2
Setup Development Environment For React Project
Run Your Project And See The Effect
Rendering Elements
In React, elements are the smallest building blocks of React applications. React elements are immutable and describe what you want to see on the screen. They are used to construct the user interface by defining how it should look at a given point in time. When rendering, React elements are passed to the React DOM, which efficiently updates and renders the elements to the actual DOM.
0/12
Root Node
Render New Object For Root Node
React JSX
Add A Separate File In Project
Components
Arrow Function
State
Periodic Excercise For Previous Lessons
Props
Event
Conditional Rendering
Map And Key
Build Your Application
0/1
useEffect
Learning Journey Of React
About Lesson

We had learned that ReactDOM.render() can render some thing to web page. Now let’s try to change the default content in the root node to render a new object.

Remove <App /> and add our new code to show “hello world” on the web page:

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
    <h1>hello world</h1>
   </React.StrictMode>
 );

See the result on your browser after run npm run start.

You can also use our online tool to write code and see the effect if you have not real development environment.

exercise
Previous
Next