|
| React Basics | COursera Meta |
React is a robust JavaScript library ideal for creating user interfaces for both web and mobile applications. This course delves into the core concepts of the React library, equipping you with the foundational skills needed to build efficient, high-performance, and scalable applications.
Upon completing this course, you will be able to:
- Utilize reusable components to display views that update with data changes,
- Develop more scalable and maintainable websites and applications,
- Use props to transfer data between components,
- Create dynamic and interactive web pages and applications,
- Implement forms to enable user interaction with the web page,
- Construct an application using React.
Throughout the course, you will gain proficiency in various tools and software, including React.js, JSX, HTML, CSS, JavaScript, and VSCode. By harnessing the knowledge from this course, you will develop new skills, enhance your productivity, effectively manage data, and advance your career.
This course is designed for beginners aiming for a career in mobile development. No prior development experience is required, only basic internet navigation skills and a willingness to start coding.
Notice!
Always refer to the module on your course for the most accurate and up-to-date information.
Attention!
If you have any questions that are not covered in this post, please feel free to leave them in the comments section below. Thank you for your engagement.
Module Quiz
1. Why is React using the concept of components?
- It helps accessibility readers for people who are visually impaired.
- It allows the browser to render your pages faster.
- It allows you to build more modular apps.
- It improves the styling of your pages.
2. What is the absolute minimum code that a component must have to be able to
show something on a screen when rendered?
- A named function declaration and an array of items inside of the function's body.
- A named function declaration and a return statement with at least a single element with some text inside of it.
- A named function declaration.
- A named function declaration and some variables in the function’s body.
3. What are the benefits of using props?
- Props allow children components to update the values of each prop independent from their parent component.
- Props allow developers to write custom HTML tags.
- Props allow parent components to pass data to children components.
4. You are tasked with building a web layout using React. The layout should
have a header, a footer, and three products showing various data in the main
part of the page. Choose the preferred component structure.
- It should have a separate component for each link, paragraph, heading, etc.
- It should have the following components: Header, Main, Product, Footer (with the Product component being imported into Main and rendered three times).
- It should all fit into a single component named App component.
5. Which of the following keywords can you usually find in a React
component?
- module, function, prop, exported, default
- function, props, export, import, contain
- modular, expression, prop, default
- function, props, return, export, default
6. What is create-react-app?
- It’s a command you can use in a component.
- It’s a command you run when you want to serve your app in the browser.
- It’s an npm package used to build a boilerplate React app.
- It’s a stand-alone application on the web.
7. Imagine you want to build a brand new React app, named “example”. Choose
the correct command to build a starter React app to work off of.
- npm init react-app example
- node init react-app example
- npm install react-app example
- npm initialize react-app example
8. True or false? When you write arrow functions, for any number of parameters
other than a single parameter, using parentheses around parameters is
compulsory.
- True.
- False
9. True or false? You can use function calls in JSX.
- True
- False
10. True or false? When an arrow function has a single parameter, you do not
need to add parentheses around the item parameter (to the left of the arrow).
- True
- False
Module quiz: Data and state
1. In React, data flows in one way: from a parent component to a child
component.
- True
- False
2. Why is one-way data flow important in React?
- It ensures that the data is flowing from top to bottom in the component hierarchy.
- It ensures that the data is flowing from bottom to top in the component hierarchy.
3. True or false? State data is the data inside a component that a component
can mutate.
- True
- False
4. What is prop drilling?
- Prop drilling is a situation where you are passing data from a parent to a child component, then to a grandchild component, and so on, until it reaches a more distant component further down the component tree, where this data is required
- Prop drilling is a situation where you are passing data from a child, to a parent component, then to a grandparent component, and so on, until it reaches a more distant component further up the component tree, where this data is required.
5. The distinction between stateful and stateless components is that the
latter doesn't have its own state.
- True
- False
6. Choose the correct statement.
- Remember that you should always change the values of props in children components; you should never work with them as they are. In other words, props are mutable.
- Remember that you should never change the values of props in children components; you should only work with them as they are. In other words, props are immutable.
7. Is this code valid?
function App() {const handler = () => console.log('fourth example')return (<div><button onClick = {handler} >Click Me!</button></div>)}export default App
- Yes
- No
8. Is this code valid?
<button onClick={ () => console.log('clicked') }>Click me</button>
- Yes
- No
9. Select the correct statement: The useState hook...
- ... lets you hook into React state and lifecycle features from a component.
- ...is not part of React; you must import it from a third-party package.
- ... has a convention that if the state variable is named, for example, counter, the function to update this counter variable should be named counterFunction.
- ... should never be called at the top level of a React component.
10. The Context API allows you to:
- Avoid having to pass state down through multiple levels of components.
- Avoid having to use the return statement in a child component.
- Avoid having to keep your components modular.
Module quiz: navigation, updating and assets in React.js
1. True or false? In React, you can use a ternary operator in a component's
return statement in React.
- True
- False
2. React Router is...
- A built-in part of React-DOM.
- A built-in part of React.
- A stand-alone package that you can add to a React app.
3. React Router has a <Link> element.
- True
- False
4. Please choose the valid command to install react-player.
- npm install react-player
- npm-install react-player
- npm-install-react-player
5. True or false? webpack is a module bundler.
- True
- False.
6. What will be the output of the code below?
let name; if (Math.random() > 0.5) { name = "Mike"} else { name = "Susan"}
- It will always be Susan
- It will always be Mike
- It will be sometimes Mike, and sometimes Susan, randomly
- It will be 0.5
7. Is the following component syntactically correct?
import car from "./assets/images/car.jpg";function CarImage() {return (<imgheight={200}src={car}alt="Car image"/>);};export default CarImage;
- Yes
- No
8. What is an asset?
- Images, stylesheets, fonts
- Components
- Images, video, and components
9. What is the syntax used to add a new dev dependency to a React app?
Select all that apply.
- npm i –save-dev some-package-name
- npm install –save-dev some-package-name
- npm init some-package-name
- node init some-package-name
10. If your app can compile without it, you can keep an asset in a public
folder.
- True
- False