Career Camp | React
Introduction to React
1. Which of the following statements is incorrect about React?
2. Which of the following is/are correct about SPA(Single page application)?
3. Identify the correct statement(s) describing React as a declarative language.
4. React Elements
Complete the given code to Render the image on the web page.
Note: The link for the image is "https://files.codingninjas.in/coding-ninjas-24647.png".
Solution :
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
// Write your React code here
const image = React.createElement('img', {
src: "https://files.codingninjas.in/coding-ninjas-24647.png"
},);
ReactDOM.createRoot(document.getElementById("root")).render(image);
</script>
</body>
</html>
5 . Updating HTML Node
6. JSX Equivalent
7. createRoot in React
8. React is Composable
Create a React Component called App, which renders the content as shown in the expected output.
Component should have a heading, a paragraph, and an ordered or unordered list.
Solution :
<!DOCTYPE html>
<html>
<head>
<title>React Component</title>
<!-- Include all the CDNs here -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App=()=>(<>
<h1>React Project</h1>,
<p>Skills used to make this project</p>,
<ol>
<li>HTML</li>
<li>javaScript</li>
<li>CSS</li>
</ol>
</>)
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
</script>
</body>
</html>
9. Functional Components
Assignment
1. React Elements
2. React DOM Tree
