Educative Flashcards
What are props?
props, we can pass variables as information from one component to another component down the component tree.
What is a state in React?
React state is used to make applications interactive. We’ll be able to change the application’s appearance by interacting with it. A state is just an object which holds the data that the component needs or the child components need. A State is a single source of truth.
What is a Hook in React?
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. … You can also create your own Hooks to reuse stateful behavior between different components. https://reactjs.org/docs/hooks-state.html
What does useState do?
useState is Hook in react and is used for managing state in a function component. React’s useState hook takes an initial state as an argument. The function will return an array with two values. The first value represents the current state; the second value is a function to update this state. This function is also called as state updater function. Eg : const [searchTerm, setSearchTerm] = React.useState(‘’);
How do we lift up data in the component tree? or How do we pass the data from child component to parent in React?
We can pass a callback handler as props to child . Eg: const App = () => { const handleSearch = event => { console.log(event.target.value); }; return (
); }; const Search = props =\> { const [searchTerm, setSearchTerm] = React.useState(''); const handleChange = event =\> { setSearchTerm(event.target.value); props.onSearch(event); }; return (
Search:
Searching for {searchTerm}.
); }; export default App;
What is a component?
A component is a reusable peice of our website
What is a Firebase
Firebase is essentially a Backend-as-a-Service (BaaS) mobile and web application development platform developed by Firebase, Inc in 2011 and then acquired by Google in 2014. It provides users with hosted backend services such as a real-time database, cloud storage, authentication, crash reporting, remote configuration, and hosting for static files.
Features of firebase
- Easy Authentication Mechanism # It can handle user authentication on its own. It provides an easy way to use SDK where we can specify the authentication criteria (email, password, etc.) and our custom authentication process (optional). 2. Real-time Database Firebase erases the need to set up our own database infrastructure. Its real-time cloud database stores data as JSON, which means that there is no barrier between objects and data. 3. Easy setup To use firebase we just have to install firebase package in our system and import it in our application. 4.Security # The Firebase platform lets us specify our own security rules for different parts of the application. In terms of file transfers and data uploaded by the users, the platform is highly secure. Since Firebase uses Google Cloud storage, storing user content is as easier than ever. 5.App Indexing # App indexing makes our application more prominent in Google search and supports ad targeting to increase popularity.
How to add authentication to your application in fb
- Go to firebase-> authenticate 2.Go to developers.facebook.com and create a new app. 3. Get the appIdd and the secret key and Paste it in firebase. Copy the url from the firebase 4.In developers.facebook.com-> Dashboard-> Facebook Login -> setup. Once you setup, the Facebook login will be visible in the sidebar. 5. Go to Fb Login-> settings -> Paste the copied url from the firebase. and change Embedded browser OAuth Login to Yes. Save
How to add authentication to your application.
- Go to firebase-> authenticate 2. Enable the authentication you want to add. For example: Fb, Github etc 3. Go the developers site. Get the client secret key and app id 4. Create login component and import it in the component where you want authentication in your application 5.Crete authenticate function and pass it to Login component 6. import firebase and inside authenticate method -> new firebase.auth.GitHubAuthProvider(). firebaseApp.auth().signInWithPopup().then(this.authHandler) 7. authHandler is the method which will tell you what to do after login 8.
React vs Polymer
- React used Virtual DOM technology to render elements which makes it super fast. Polymer doesn’t. 2. Polymer components are webcomponent compatible which means that all the browsers will understand these component. 3. React uses JSX syntax . so it needs transpiling . Whereas Polymer used simple HTML.
What is a virtual DOM
Virtual DOM is a technology that benefits React with its incredible rendering speed. It consists of two copies, one is the original and another is updated version that reflects changes received from the view. A React function checks the differences and outputs a stream of DOM operations that only alter the parts of the view that actually changed, saving time and resources that would have otherwise been spent recreating the entire updated view.
What is JSX Files?
JSX files combine HTML and JavaScript code into a single file. React’s sleek and simple syntax means you get a single, self-contained component that tells you exactly how it will be rendered.
What are Webcomponents?
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
